<script setup lang="ts">
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="$route.path"
          text-color="#fff" @open="handleOpen" @close="handleClose" router>
          <el-sub-menu index="/home">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>CompositionAPI 组合式api</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/setup">setup</el-menu-item>
              <el-menu-item index="/home/ref">ref</el-menu-item>
              <el-menu-item index="/home/reactive">reactive</el-menu-item>
              <el-menu-item index="/home/diff">diff</el-menu-item>
              <el-menu-item index="/home/computed">computed</el-menu-item>
              <el-menu-item index="/home/watch">watch</el-menu-item>
              <el-menu-item index="/home/lifecycle">lifecycle</el-menu-item>
            <el-menu-item index="/home/father">father</el-menu-item>            
            <el-menu-item index="/home/toRefs">toRefs</el-menu-item>
            <el-menu-item index="/home/hook">hook混入</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="/other">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>CompositionAPI 其他api</span>
            </template>
            <el-menu-item-group>
             <el-menu-item index="/other/shallow">01shallowRef和shallowReactive</el-menu-item>
             <el-menu-item index="/other/readonly">02readonly和shallowReadonly</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 路由的出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'

  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
</script>
<style lang="scss" scoped>
/* 下载scss 
    npm i sass
    npm i sass-loader
*/
/* :deep(vue3) 和::v-deep(vue2)作用一样 */
  :deep(.el-aside){
    height: 100vh !important;
    background-color: #545c64;
  }
  :deep(.el-menu){
    border: none !important;
  }
</style>